<template>
<z-container>
          <z-header height="28px">radio（单选）</z-header>
          <z-main>
            <z-row :gutter="12">
              <z-col :span="3">单选状态</z-col>
              <z-col :span="10">
                <z-radio-group v-model="radio.radio1">
                  <z-radio :label="3" disabled>已选中项</z-radio>
                  <z-radio :label="6" disabled>未选中项</z-radio>
                  <z-radio :label="6">未选中项</z-radio>
                </z-radio-group>
              </z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">按钮类型</z-col>
              <z-col :span="4">
                <z-radio-group v-model="radio.radio2">
                  <z-radio-button label="北京"></z-radio-button>
                  <z-radio-button label="上海"></z-radio-button>
                  <z-radio-button label="广州"></z-radio-button>
                </z-radio-group>
              </z-col>
              <z-col :span="4" >
                 <z-radio-group v-model="radio.radio3" disabled>
                  <z-radio-button label="北京"></z-radio-button>
                  <z-radio-button label="上海"></z-radio-button>
                  <z-radio-button label="广州"></z-radio-button>
                </z-radio-group>
              </z-col>
               <z-col :span="4">
                 <z-radio-group v-model="radio.radio4" size="large">
                  <z-radio-button label="北京" disabled></z-radio-button>
                  <z-radio-button label="上海"></z-radio-button>
                  <z-radio-button label="广州"></z-radio-button>
                </z-radio-group>
              </z-col>
            </z-row>
            <z-row :gutter="12">
              <z-col :span="3">radio加边框</z-col>
              <z-col :span="10">
                <z-radio :label="4" border v-model="radio.radio5">未选中项</z-radio>
                <z-radio :label="5" border v-model="radio.radio6" disabled>已选中项</z-radio>
                <z-radio :label="3" border v-model="radio.radio7" size="large">已选中项</z-radio>
                <z-radio :label="3" border v-model="radio.radio8" disabled size="large">未选中项</z-radio>
              </z-col>
            </z-row>
          </z-main>
        </z-container>
  
  
</template>
<script>
export default{
  name:'cRadio',
  data(){
    return {
      radio:{
        radio1:3,
        radio2:'上海',
        radio3:'上海',
        radio4:'上海',
        radio5:'',
        radio6:5,
        radio7:'',
        radio8:''
      }
      
    }
  }
}
</script>